<template>
  <view class="phone">
    <view class="container">
      <view class="phone-title">绑定手机号</view>
      <input v-model="phoneNumber" type="tel" placeholder="请输入手机号" required />
      <view class="code-container">
      
        <input v-model="verificationCode" type="text" placeholder="请输入验证码" required />
        <button :disabled="isCounting" @tap="startCountdown">{{ countdownText }}</button>
      </view>
      <button @tap="handleSubmit" class="submit-button">绑定</button>

    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { useMemberStore } from '../../stores';
import { updateUser } from '../../services/mine';
import { sendPhone } from '../../services/login';
const useMember = useMemberStore();
const phoneNumber = ref('');
const verificationCode = ref('');
const isCounting = ref(false);
const countdown = ref(60);
const countdownText = ref('获取验证码');

const startCountdown =async () => {
  //正则验证手机号格式
  const phoneRegex = /^1[3456789]\d{9}$/;
  if (!phoneRegex.test(phoneNumber.value)) {
    uni.showToast({ icon: 'none', title: '请输入正确的手机号' });
    return;
  }
  console.log("@@@@@@@@@@@@@@@@@@@@@@@");
  
  if (isCounting.value) return;
  isCounting.value = true;
  const intervalId = setInterval(() => {
    countdown.value--;
    if (countdown.value === 0) {
      clearInterval(intervalId);
      isCounting.value = false;
      countdownText.value = '重新获取';
      countdown.value = 60;
    } else {
      countdownText.value = `${countdown.value}秒后重新获取`;
    }
  }, 1000);
  const res = await sendPhone(phoneNumber.value)
  if(res.code==200)
  {
    uni.showToast({ icon: 'none', title: '验证码已发送!' });
  }else{
    uni.showToast({ icon: 'none', title: res.msg });
  }
}
 

const handleSubmit = () => {

  if (!phoneNumber.value || !verificationCode.value) {
    uni.showToast({ icon: 'none', title: '请输入手机号和验证码' });

    return;
  }  
  updateUser(
    {
      userId: useMember.profile.userInfo.userId,
      phone: phoneNumber.value,
      code: verificationCode.value

    }).then((res) => {
      if (res.code === 200) {
        useMember.profile.userInfo.phone = phoneNumber.value;
        uni.navigateBack();
      }

    })
}

onMounted(() => {
  // 页面加载完成时可以做一些初始化操作
});
</script>

<style scoped>
.phone {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f0f2f5;
}

.container {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  max-width: 400px;
  width: 100%;
}

.phone-title {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin-bottom: 20px;
  text-align: center;
}

form {
  display: flex;
  flex-direction: column;
}

input {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 0px 10px;
  margin-bottom: 10px;
  font-size: 16px;
  width: calc(100% - 20px);
  box-sizing: border-box;
  height: 40px;
}

.code-container {
  display: flex;
  align-items: center;
}

input[type="text"] {
  flex: 1;
}

button {
  border: none;
  border-radius: 4px;
  padding: 0px 10px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

button:disabled {
  background-color: #ddd;
  cursor: not-allowed;
}

button:not(:disabled) {
  background-color: #007bff;
  color: white;
}

.submit-button {
  margin-top: 20px;
  background-color: #28a745;
  color: white;
}

.submit-button:hover {
  background-color: #218838;
}
</style>
